<div class="banner-wrapper container-fluid">
    <div class="row">
        <div class="banner-mark"></div>
        <div class="banner-picture"></div>
        <div class="banner-title animated bounce">$t("title")</div>
    </div>
</div>
<div class="main-wrapper container">
    <div class="main-ok">
        <i class="glyphicon glyphicon-ok"></i>
    </div>
    <div id="introduction" class="main-card introduction">
        <div id="introductionAni0" class="main-card-title">
            <div class="title-zn">产品介绍</div>
            <div class="title-en hidden-xs">INTRODUCTION</div>
        </div>
        <div class="main-card-content container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="step-wrapper step-wrapper-1">
                        <div id="introductionAni1" class="animate-wrapper">
                            <img class="introduction-picture-1 animated slower infinite introductionAni" src="../../images/home/introduction-step-1.png"
                                alt="introduction-step-1">
                            <div class="step-title">$t("introTit1")</div>
                            <div class="step-sub-title">$t("introCon1")</div>
                        </div>
                        <div class="vertical-line vertical-line-left hidden-xs"></div>
                        <div class=" vertical-line vertical-line-right hidden-xs"></div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="step-wrapper step-wrapper-2">
                        <div id="introductionAni2" class="animate-wrapper">
                            <img class="introduction-picture-2 animated slower infinite introductionAni delay-500ms"
                                src="../../images/home/introduction-step-2.png" alt="introduction-step-2">
                            <div class="step-title">$t("introTit2")</div>
                            <div class="step-sub-title">$t("introCon2")</div>
                        </div>
                        <div class=" vertical-line vertical-line-right hidden-xs"></div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="step-wrapper step-wrapper-3">
                        <div id="introductionAni3" class="animate-wrapper">
                            <img class="introduction-picture-3 animated slower infinite introductionAni delay-1s" src="../../images/home/introduction-step-3.png"
                                alt="introduction-step-3">
                            <div class="step-title">$t("introTit3")</div>
                            <div class="step-sub-title">$t("introCon3")</div> </div> <div class=" vertical-line vertical-line-right hidden-xs">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="milestone" class="main-card milestone">
            <div id="milestoneAni0" class="main-card-title">
                <div class="title-zn">产品规划</div>
                <div class="title-en hidden-xs">MILESTONE</div>
            </div>
            <div class="main-card-content container">
                <div class="row timer-step-black timer-step hidden-xs">
                    <div class="col-lg-6">
                        <div class="timer-liner timer-liner-left hidden-circle hidden-xs"></div>
                    </div>
                    <div class="col-lg-6">
                    </div>
                </div>
                <div class="row timer-step">
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-10">
                                <div id="milestoneAni1" class="timer-title-box">
                                    <div class="timer-title-inner-border"></div>
                                    <div>
                                        <div class="text-left">
                                            <span class="title-line"></span>01
                                            <small class="show-xs">(2019年Q1)</small>
                                        </div>
                                        <div class="">$t("q1")</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="timer-liner timer-liner-left hidden-xs"></div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-offset-2 col-lg-5">
                                <div id="milestoneAni2" class="timer-date-box hidden-xs">
                                    2019年Q1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row timer-step">
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-offset-5 col-lg-5">
                                <div id="milestoneAni3" class="timer-date-box hidden-xs">
                                    2019年Q2
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-offset-2 col-lg-10">
                                <div id="milestoneAni4" class="timer-title-box">
                                    <div class="timer-title-inner-border"></div>
                                    <div>
                                        <div class="text-left">
                                            <span class="title-line"></span>02
                                            <small class="show-xs">(2019年Q2)</small>
                                        </div>
                                        <div class="">$t("q2")</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="timer-liner timer-liner-right hidden-xs"></div>
                    </div>
                </div>
                <div class="row timer-step">
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-10">
                                <div id="milestoneAni5" class="timer-title-box">
                                    <div class="timer-title-inner-border"></div>
                                    <div>
                                        <div class="text-left">
                                            <span class="title-line"></span>03
                                            <small class="show-xs">(2019年Q3)</small>
                                        </div>
                                        <div class="">$t("q3")</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="timer-liner timer-liner-left hidden-xs"></div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-offset-2 col-lg-5">
                                <div id="milestoneAni6" class="timer-date-box hidden-xs">
                                    2019年Q3
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row timer-step timer-step-last">
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-offset-5 col-lg-5">
                                <div id="milestoneAni7" class="timer-date-box hidden-xs">
                                    2019年Q4
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-offset-2 col-lg-10">
                                <div id="milestoneAni8" class="timer-title-box">
                                    <div class="timer-title-inner-border"></div>
                                    <div>
                                        <div class="text-left">
                                            <span class="title-line"></span>04
                                            <small class="show-xs">(2019年Q4)</small>
                                        </div>
                                        <div class="">$t("q4")</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="timer-liner timer-liner-right hidden-liner hidden-xs"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="merchants" class="main-card merchants">
            <div id="merchantsAni0" class="main-card-title">
                <div class="title-zn">成为商家</div>
                <div class="title-en hidden-xs">MERCHANTS</div>
            </div>
            <div class="main-card-content container">
                <div class="row">
                    <div class="col-lg-4 merchants-step merchants-step-1 text-left ">
                        <img id="merchantsAni1" class="merchants-picture-1" src="../../images/home/merchants-step-1.png"
                            alt="merchants-step-1">
                        <div class="step-num-wrapper">
                            <div class="bg-white text-center">
                                <span class="step-num">1</span>
                                <span class="step-label">$t("apply")</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 merchants-step merchants-step-2">
                        <img id="merchantsAni2" class="merchants-picture-2" src="../../images/home/merchants-step-2.png"
                            alt="merchants-step-2">
                        <div class="step-num-wrapper">
                            <div class="bg-white">
                                <span class="step-num">2</span>
                                <span class="step-label">$t("confirm")</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 merchants-step merchants-step-3 text-right">
                        <img id="merchantsAni3" class="merchants-picture-3" src="../../images/home/merchants-step-3.png"
                            alt="merchants-step-3">
                        <div class="step-num-wrapper text-left">
                            <div class="bg-white text-center">
                                <span class="step-num">3</span>
                                <span class="step-label">$t("use")</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="step-line hidden-xs hidden-sm hidden-md"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-10 col-lg-4 col-xs-offset-1 col-lg-offset-4">
                <button id="apply" class="application-btn btn btn-primary btn-lg btn-block" type="submit">$t("join")</button>
            </div>
        </div>
    </div>
    <div id="download" class="download-wrapper container-fluid">
        <div class="download-inner-wrapper container">
            <div class="downlaod-title">$t("downloadTit")</div>
            <div class="downlaod-sub-title">$t("downloadCon")</div>
            <div class="row">
                <div id="downloadLeft" class="col-lg-6">
                    <div class="hidden-xs hidden-sm hidden-md hold-up-top"></div>
                    <div class="download-btns">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="download-btn">
                                    <i class="download-icon icon-andriod"></i>
                                    安卓客户端（$t("come")）
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="download-btn">
                                    <i class="download-icon icon-ios"></i>
                                    IOS客户端（$t("come")）
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="download-btn more">
                                    更多方式
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="downloadRight" class="col-lg-6">
                    <div id="downloadPicture" class="download-picture">
                        <img class="dowload-device" src="../../images/home/download-picture.png" alt="device">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-wrapper container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 contact-us">
                    <div class="">联系我们</div>
                    <div class="">newpay138@gmail.com</div>
                </div>
                <div class="col-lg-10 footer-icons">
                    <i class="footer-icon icon-facebook active"></i>
                    <i class="footer-icon icon-twitter"></i>
                    <i class="footer-icon icon-wechat"></i>
                    <i class="footer-icon icon-sina"></i>
                </div>
            </div>
        </div>
    </div>